<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .res {
        width: 100%;
        word-break: break-all;
      }
      .res-content {
        display: none;
      }
    </style>
  </head>
  <body>
    <p>请输入一个需要的<strong>结果值</strong> ，计算后将得到多组分式</p>
    <label for="">
      结果值：
      <input type="text" />
    </label>
    <button>计算</button>
    <div class="res-content">
      <strong>结果：</strong>
      <p class="res"></p>
    </div>
    <script>
      const input = document.querySelector("[type = 'text']");
      const btn = document.querySelector("button");
      const resP = document.querySelector(".res");
      const resContent = document.querySelector(".res-content");

      btn.onclick = function () {
        const val = input.value;
        const errMsg = verifyVal(val);
        if (errMsg) {
          alert(errMsg);
          input.value = "";
          return;
        }
        this.textContent = "计算中...";
        resP.innerHTML = "";
        resContent.style.display = "none";
        setTimeout(() => {
          cal(Number(val));
          this.textContent = "计算";
        }, 100);
      };
      function verifyVal(valStr) {
        const val = Number(valStr);
        const strategies = {
          isNum() {
            if (isNaN(val)) {
              return "结果值需要是一个小数（str）";
            }
          },
          isEmpty() {
            if (!val) {
              return "请输入结果值";
            }
          },
          isdecimals() {
            if (val >= 1) {
              return "结果值需要是一个小数";
            }
          },
        };
        const arr = Object.keys(strategies);
        for (let i = 0; i < arr.length; i++) {
          const errMsg = strategies[arr[i]]();
          if (errMsg) {
            return errMsg;
          }
        }
      }
      function cal(val) {
        const exactLen = val.toString().length - 2;
        function generatorFraction() {
          const arr = [];
          for (let i = 20; i <= 100; i++) {
            const outNum = i;
            for (let j = 20; j <= 100; j++) {
              const innerNum = j;
              if (outNum <= innerNum) {
                break;
              }
              arr.push(`${innerNum}/${outNum}`);
            }
          }
          return arr;
        }
        const arr1 = generatorFraction();
        const arr2 = generatorFraction();
        function isRepetFraction(out, inner, res) {
          const curNum =
            +(out.split("/")[0] + out.split("/")[1]) +
            +(inner.split("/")[0] + inner.split("/")[1]);
          return res.find(item => {
            const resNum =
              +(item[0].split("/")[0] + item[0].split("/")[1]) +
              +(item[1].split("/")[0] + item[1].split("/")[1]);
            if (curNum === resNum) {
              return true;
            }
          });
        }
        function calMul(arr1, arr2, val) {
          const res = [];
          for (let i = 0; i < arr1.length; i++) {
            const out = arr1[i];
            const outNum = +(out.split("/")[0] / out.split("/")[1]).toFixed(
              exactLen
            );
            for (let j = 0; j < arr2.length; j++) {
              const inner = arr2[j];
              const innerNum = +(
                inner.split("/")[0] / inner.split("/")[1]
              ).toFixed(exactLen);
              if (innerNum * outNum === val) {
                if (isRepetFraction(out, inner, res)) {
                  continue;
                }
                res.push([out, inner]);
              }
            }
          }
          return res;
        }
        const res = calMul(arr1, arr2, val);
        console.log(res);
        const total = res.length;
        let defInnerHtml = `<p>共计：${total}个</p>`;
        for (let i = 0; i < res.length; i++) {
          defInnerHtml += `<p>${res[i]}</p>`;
        }
        resP.innerHTML = defInnerHtml;

        resContent.style.display = "block";
      }
    </script>
  </body>
</html>
